<template>
    <div class="order-report">
        <div class="report-table-top-title">娱加云总店</div>
        <div class="report-table-form1">
            <div class="report-table-form1-line">
                <div
                    v-if="roleId !== 2"
                    class="report-table-form1-item word samll"
                    style="width: 70px"
                >
                    代理商:
                </div>
                <div
                    class="report-table-form1-item"
                    v-if="roleId !== 2"
                    style="width: 180px"
                >
                    <el-select
                        v-model="agentId"
                        filterable
                        placeholder="请选择"
                        size="small"
                    >
                        <el-option label="全部" value=""></el-option>
                        <el-option
                            v-for="item in agentList"
                            :key="item.id"
                            :label="item.agentName"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </div>
                <div
                    class="report-table-form1-item word samll"
                    style="width: 70px"
                >
                    总店编号:
                </div>
                <div class="report-table-form1-item" style="width: 180px">
                    <el-input
                        v-model="mainCompanyCode"
                        placeholder
                        size="small"
                        suffix-icon="el-icon-search"
                    ></el-input>
                </div>
                <div
                    class="report-table-form1-item word samll"
                    style="width: 70px"
                >
                    总店名称:
                </div>
                <div class="report-table-form1-item" style="width: 180px">
                    <el-input
                        v-model="mainCompanyName"
                        placeholder
                        size="small"
                        suffix-icon="el-icon-search"
                    ></el-input>
                </div>
                <el-button
                    type="primary"
                    size="small"
                    @click="getYjyunmaincompany"
                    >搜索</el-button
                >
                <el-button
                    type="primary"
                    size="small"
                    @click="toAdd"
                    v-if="roleId === 2"
                    >新增总店</el-button
                >
                <el-button type="primary" size="small" @click="showValue = true"
                    >同步商家数据</el-button
                >
            </div>
        </div>
        <div class="page-padding-gray-small"></div>
        <!-- 表格 -->
        <div class="report-table-wrapper" v-if="companyList.length > 0">
            <el-table
                :header-cell-style="headerCellStyle"
                size="small"
                :data="companyList"
                border
                style="width: 100%"
            >
                <el-table-column
                    prop="mainCompanyCode"
                    min-width="100"
                    label="总店编号"
                ></el-table-column>
                <el-table-column
                    prop="mainCompanyName"
                    min-width="100"
                    label="总店名称"
                ></el-table-column>
                <el-table-column
                    prop="regionCode"
                    min-width="100"
                    label="行政编号"
                ></el-table-column>
                <el-table-column
                    min-width="100"
                    prop="mainCompanyAddress"
                    label="详细地址"
                ></el-table-column>
                <el-table-column
                    prop="relationPhone"
                    min-width="100"
                    label="联系电话"
                ></el-table-column>
                <el-table-column
                    prop="agentName"
                    min-width="100"
                    label="代理商"
                ></el-table-column>
                <el-table-column prop="status" label="状态" min-width="100">
                    <template slot-scope="props">
                        <!-- 0 正常 1 停用 -->
                        <div v-if="props.row.status === 0">正常</div>
                        <div v-if="props.row.status === 1">停用</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" min-width="370">
                    <template slot-scope="scope">
                        <div style="margin-bottom: 10px">
                            <el-button
                                style="margin-right: 10px"
                                size="mini"
                                type="primary"
                                @click="toModify(scope.$index, scope.row)"
                                >修改</el-button
                            >
                            <el-button
                                style="margin-right: 10px"
                                size="mini"
                                type="primary"
                                plain
                                v-if="
                                    (roleId === 1 &&
                                        (manageRoleType === 0 ||
                                            manageRoleType === 4 ||
                                            manageRoleType === 5)) ||
                                    roleId === 2
                                "
                                @click="resetPassword(scope.row)"
                                >重置密码</el-button
                            >
                            <el-button
                                style="margin-right: 10px"
                                size="mini"
                                type="primary"
                                plain
                                @click="
                                    toEditAuthority(scope.$index, scope.row)
                                "
                                v-if="roleId === 1"
                                >权限编辑</el-button
                            >
                            <el-button
                                v-show="
                                    scope.row.status === 1 &&
                                    roleId === 1 &&
                                    (manageRoleType === 0 ||
                                        manageRoleType === 1 ||
                                        manageRoleType === 2)
                                "
                                style="margin-right: 10px"
                                size="mini"
                                type="primary"
                                @click="quickEnable(scope.$index, scope.row)"
                                >快速启用</el-button
                            >
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 页码 -->
        <div class="report-table-block">
            <div class="report-table-block-in">
                <el-pagination
                    background
                    :current-page.sync="page"
                    @current-change="handleCurrentChange"
                    :page-size="10"
                    layout="prev, pager, next, total"
                    :total="totalNum"
                ></el-pagination>
            </div>
        </div>

        <div class="page-padding"></div>
        <synchronousShop
            :managementType="null"
            :value.sync="showValue"
            :type="0"
        ></synchronousShop>
    </div>
</template>

<script type="text/ecmascript-6">
import synchronousShop from '../page_1_KTV_manage/components/synchronousShop'
export default {
    data: function () {
        return {
            agentId: '',
            agentList: [],
            page: 1,
            limit: 10,
            showValue: false,
            totalNum: 20,
            mainCompanyCode: '',
            mainCompanyName: '',
            companyList: [
                {
                    mainCompanyId: 880001,
                    mainCompanyCode: '880001',
                    mainCompanyName: '金山总店',
                    regionCode: '350104',
                    mainCompanyAddress: '金山618',
                    relationPhone: '18200000001',
                    relationName: 'd',
                    agentId: 1,
                    agentName: 'lyq',
                    status: 0
                }
            ]
        }
    },
    mounted () {
    },
    created () {
        if (this.roleId === 2) {
            this.getYjyunmaincompany()
        } else {
            this.getAllAgent()
        }
    },
    watch: {
    },
    components: {
        synchronousShop
    },
    props: {
    },
    computed: {
        roleId () {
            return this.$store.state.roleId
        },
        manageRoleType () {
            return this.$store.state.manageRoleType
        }
    },
    methods: {
        resetPassword (row) {
            this.$confirm('确定重置密码为 syclub ?', '重置密码', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.post(this.$store.state.IP + '/system/company/resetMainCompanyPsw', {
                    data: {
                        companyCode: row.mainCompanyCode
                    }
                },
                    {
                        'emulateJSON': false
                    }
                ).then(response => {
                    response = response.body
                    console.log(response)
                    if (response.ret === '0') {
                        this.$message({
                            showClose: true,
                            message: '重置成功',
                            type: 'success'
                        })
                    }
                }, response => {
                })
            }).catch(() => {
            })
        },
        getAllAgent () {
            this.$http.get(this.$store.state.IP + '/systemUserManage/getAgents', {
                data: {
                }
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    console.log('调用获取所有代理商成功')
                    this.agentList = response.res
                    this.getYjyunmaincompany()
                }
                if (response.ret !== '0') {
                    console.log('调用获取所有代理商失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        },
        toEditAuthority (index, row) {
            this.$store.dispatch('setPageHeadShop', 2)
            // todo
            this.$store.dispatch('setCompanyCode', row.mainCompanyCode)
            // this.$store.dispatch('setCompanyCode', 11018)
            // this.$store.dispatch('setCompanyCode', 11001)
        },
        getAgentId () {
            let agentId = -1
            if (this.roleId === 2) {
                agentId = this.$store.state.agentIdFY
            } else {
                if (this.agentId === '' && this.roleId === 1 && (this.manageRoleType === 1 || this.manageRoleType === 2)) {
                    agentId = (this.agentList.map(item => item.id)).join(',')
                } else {
                    agentId = this.agentId === '' ? -1 : this.agentId
                }
            }
            return agentId
        },
        getYjyunmaincompany () {
            // 获取总店列表
            this.$http.post(this.$store.state.IP + '/system/yjyunmaincompany/Page', {
                data: {
                    page: this.page - 1,
                    limit: this.limit,
                    mainCompanyCode: this.mainCompanyCode,
                    mainCompanyName: this.mainCompanyName,
                    agentId: this.getAgentId()
                }
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('--------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    console.log(response)
                    this.totalNum = response.data.total
                    this.companyList = response.data.list
                } else {
                    this.totalNum = 0
                    this.companyList = []
                }
            })
        },
        handleCurrentChange () {
            // 页码 变化
            this.getYjyunmaincompany()
        },
        toAdd () {
            // 去 新增 页面
            this.$store.dispatch('setHeadShopInfo', {})
            this.$store.dispatch('setPageHeadShop', 1)
        },
        toModify (index, item) {
            // 去 修改
            this.$store.dispatch('setHeadShopInfo', item)
            this.$store.dispatch('setPageHeadShop', 1)
        },
        quickEnable (index, item) {
            this.$http.post(this.$store.state.IP + '/system/yjyunmaincompany/saveOrEdit', {
                data: {
                    mainCompanyId: item.mainCompanyId,
                    mainCompanyName: item.mainCompanyName,
                    regionCode: item.regionCode,
                    mainCompanyAddress: item.mainCompanyAddress,
                    relationPhone: item.relationPhone,
                    relationName: item.relationName,
                    agentId: item.agentId,
                    agentName: item.userName,
                    status: 0
                }
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    this.$message({
                        showClose: true,
                        message: '启用成功',
                        type: 'success'
                    })
                    this.getYjyunmaincompany()
                }
                if (response.ret !== '0') {
                    this.$message({
                        showClose: true,
                        message: '启用失败',
                        type: 'error'
                    })
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.order-report
    width: 100%
    background: #fff
    min-height: calc(100vh - 65px)

    .report-table-top-title
        width: 100%
        height: 64px
        line-height: 64px
        color: #000
        font-size: 18px
        background: #f1f0f5

    .report-table-form1
        width: 100%
        min-height: 40px
        padding: 16px 0 0 22px
        box-sizing: border-box
        background: #fff
        overflow: hidden

        .report-table-form1-line
            min-height: 32px
            margin-bottom: 16px

            .report-table-form1-item
                display: inline-block
                vertical-align: top
                height: 32px
                margin-right: 15px
                line-height: 32px

                &.word
                    margin-right: 0

                &.samll
                    font-size: 15px
                    text-align: left

                &.big
                    margin-right: 100px

    .report-table-block
        width: 100%
        padding-top: 22px
        height: 50px
        background: #fff
        box-sizing: border-box

        .report-table-block-in
            float: right
            padding-right: 17px

    .page-padding-gray-small
        width: 100%
        height: 22px
        background: #f1f0f5

    .page-padding
        width: 100%
        height: 20px
        background: #fff

    .report-table-total
        width: 100%
        font-size: 16px
        color: #409EFF
        padding: 22px
        margin-top: 22px
        box-sizing: border-box
        background: #fff
</style>
